<template>
    <div style="background-color: white">
        <fullSearch  searchtype='1' :commonList="commonList" class="vouchersearchbg" @checkBlur="checkBlur" @getKeyword="getKeyword" @searchClick="searchClick" @gotoback="gotoback" @lishiClick="lishiClick" @deleteClick="deleteClick"/>
        <typeSelectComponent v-if="!isshowsearch"
                             :dataList="typeList" type="2" @selectType="selectType" @showTankuang="showTankuang" @touchmove.prevent v-bind:class="{'typebgmin':isindex=='0','typebgmax':isindex=='1',}"
        />
        <div v-if="voucherAr.length > 0">
            <div v-if="!isshowsearch">

                <yd-infinitescroll :callback="getMoreloadList" ref="infinitescrollDemo" :distance="20"  v-bind:class="{'scrolllistbgmax':isindex=='0','scrolllistbgmin':isindex=='1',}">
                    <yd-list theme="4" slot="list" style="width: 100%">
                        <VoucherCellComponent :voucherAr="voucherAr" @selectdata="selectdata"/>
                    </yd-list>
                    <span slot="doneTip" style="margin-left: 0rem;">没有更多数据</span>

                </yd-infinitescroll>
            </div>

        </div>

        <div v-else style="padding-top: 2rem">
            <div v-if="!isshowsearch">
                <img src="../../assets/task_none_task_icon.png" class="nolist-image" alt="">
                <p  class="nolist-tite">{{placeName}}</p>
            </div>

        </div>


        <!--下面的框-->
        <div class="below-big">
            <div class="mui-flex" style="height: 100%">
                <div class="cell" @click="showSelctClick()">
                    <img v-if="isCheck" src="../../assets/vouchermenu.png" class="common" alt="">
                    <img v-if="!isCheck" src="../../assets/nomenu.png" class="common" alt="">
                    <div class="voucheryuan">
                        <yd-badge v-if="isCheck" bgcolor="#f38209">{{number}}</yd-badge>

                    </div>

                </div>
                <div class="cell3">
                    <yd-button v-if="isCheck" size="small" type="warning" class="confrim-button" @click.native="confrimClick" >确定</yd-button>
                    <yd-button v-if="!isCheck" size="small" type="warning" class="confrimcumston-button"  >确定</yd-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {vouchertype,voucherlist,voucherrecentSearch,voucherdeleteHistory} from "../../pcof/post";
    import {userInfoData} from '../../globalVariables'
    import VoucherCellComponent from "@/components/voucherCellComponent.vue";
    import voucherSelectCellComponent from "@/components/voucherSelectCellComponent.vue";
    import typeSelectComponent from "@/components/typeSelectComponent.vue";
    import fullSearch from "@/components/fullSearch.vue";

    export default {
        name: "voucherList",
        data() {
            return {
                placeName:'没有相关类型凭证',
                isshow:false,

                isindex:'0',//切换层级
                isshowsearch:false,
                commonList:JSON.parse(localStorage.getItem('voucherhistorysearch')),
                typeUuid:'',//选择的类型
                pageNumber: 1,
                pageSize: 20,
                serviceTotalPage: 1,
                isCheck:false,
                searchContent:'',//搜索关键字
                typeList : [],
                voucherAr: [],
                // selectList:[],
                selectList:JSON.parse(localStorage.getItem('voucher')),
                number:0,
            }
        },
        components: {
            VoucherCellComponent,
            voucherSelectCellComponent,
            typeSelectComponent,
            fullSearch,


        },
        watch: {
            searchContent: function (newValue,oldValue) {//搜索关键字

                if (newValue === null || newValue === '' || newValue.length <= 0) {
                    this.searchContent = '';
                    this.freshenList();
                } else {
                    this.searchContent = newValue;
                    this.freshenList();
                }
            },
        },
        async created()
        {

            console.log(this.commonList);
            if (this.selectList.length===0)
            {
                console.log('空的');
                this.isCheck=false;
                this.isshow=false;
                this.number=0;


            }else
            {
                console.log('不空的');
                this.isCheck=true;
                this.isshow=true;
                this.number=this.selectList.length;
                console.log(this.selectList);

            }
            this.getTypeFunc();
            this.freshenList();


        },
        methods:
            {
                deleteClick(data)
                {
                    this.isshowsearch=false;
                    localStorage.setItem('voucherhistorysearch',JSON.stringify
                    ([]));
                    this.commonList=JSON.parse(localStorage.getItem('voucherhistorysearch'));


                },
                lishiClick(data)
                {
                    this.isshowsearch=false;
                    console.log('选择列表');

                    console.log(data);

                },
                gotoback(data)//返回按钮关键字为空
                {
                    this.isshowsearch=false;
                    console.log(data);

                    this.searchContent = data.keyword;
                    this.freshenList();

                },
                getKeyword(data)
                {
                    console.log('改变数据');
                    console.log(data);
                    this.searchContent = data.keyword;
                    this.freshenList();
                },
                searchClick(data)//搜索按钮
                {
                    this.isshowsearch=false;
                    console.log('搜索数据');
                    this.searchContent = data.keyword;
                    this.freshenList();
                    console.log(data.keyword);
                    var searAr= new Array();
                    searAr=JSON.parse(localStorage.getItem('voucherhistorysearch'));
                    var myArray=[];
                    myArray=JSON.parse(localStorage.getItem('voucherhistorysearch'));

                    var  isEqualTo1=false;
                    var  isEqualTo2=false;
                    if (searAr.length>0)
                    {
                        isEqualTo2 = true;
                        //判断搜索内容是否存在，存在的话放到数组最后一位，不存在的话添加。
                        for (var i=0;i<myArray.length;i++)
                        {
                            var name=myArray[i];
                            if (this.searchContent ===name)
                            {
                                searAr.splice(i, 1);
                                searAr.push(this.searchContent);

                                isEqualTo1 = true;

                                break;
                            }
                        }

                    }
                    if (!isEqualTo1 || !isEqualTo2) {
                        if (this.searchContent===''||this.searchContent===null)
                        {

                        }else
                        {
                            searAr.push(this.searchContent);
                            console.log(searAr);
                        }

                    }

                    if(searAr.length > 5)
                    {
                        searAr.splice(0,1);

                    }
                    localStorage.setItem('voucherhistorysearch',JSON.stringify
                    (searAr));
                    this.commonList=JSON.parse(localStorage.getItem('voucherhistorysearch'));



                },
                checkBlur(data)
                {
                    console.log('hahha');
                    this.isshowsearch=true;


                },
                showTankuang()//切换层级
                {
                    this.isindex='1';

                },
                selectType(data)//类型选择
                {
                    this.isindex='0';
                    this.typeUuid=data.uuid;
                    if (this.$refs.infinitescrollDemo !== undefined) {
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
                    }
                    this.freshenList();

                },
                clickHandler(item) {//匹配的搜索

                },
                submitHandler(value) {//提交时触发方法
                    this.searchContent=value;
                    this.freshenList();
                },
                cancelHandler() { //取消触发的方法
                    this.searchContent='';
                    this.freshenList();

                },
                //刷新大表格的数据
                refrshSelctData()
                {
                    if (this.selectList.length === 0){

                    }else
                    {
                        for (var j=0;j<this.selectList.length;j++){

                            var  selectDic=this.selectList[j];
                            for (var i = 0; i < this.voucherAr.length; i++) {
                                var dic = {};
                                dic = this.voucherAr[i];
                                if (selectDic['uuid']===dic['uuid'])
                                {
                                    //新数据替换旧数据 把选择的数据替换列表的数据
                                    this.voucherAr.splice(i,1,selectDic);

                                }else
                                {

                                }
                            }
                        }
                    }


                    if (this.selectList.length==0)
                    {
                        this.isCheck=false;
                        this.isshow=false;
                        this.number=0;


                    }else
                    {
                        var newAr=[];
                        for (var i=0;i<this.selectList.length;i++)
                        {
                            if (this.selectList[i].amounts===0)
                            {

                            }else
                            {
                                newAr.push(this.selectList[i]);
                            }
                        }
                        console.log(newAr);
                        if (newAr.length===0)
                        {
                            this.isCheck=false;
                            this.isshow=false;
                            this.number=0;


                        }else
                        {
                            this.isCheck=true;
                            this.isshow=true;
                            this.number=newAr.length;

                        }

                    }



                },

                selectdata(data)//选择传过来的数据
                {
                    this.selectList=JSON.parse(localStorage.getItem('voucher'));
                    console.log('大列表选择的数据');
                    console.log(this.selectList);
                    this.refrshSelctData();

                },

                showSelctClick()//菜单按钮 点击展示选择列表
                {
                    this.isCheck=true;
                    this.isshow=true;
                    this.$router.push({name: 'voucherSelect'});

                    // console.log(this.selectList);
                    // console.log('展示列表');
                },
                liebiaoData(data)//选择弹框列表对应的数据
                {
                    this.selectList=JSON.parse(localStorage.getItem('voucher'));
                    console.log('小列表选择的数据');
                    console.log(this.selectList);
                    this.refrshSelctData();


                },
                confrimClick()//确定按钮进入下一页
                {
                    console.log('菜单列表');
                    console.log(this.selectList);
                    var newAr=[];
                    for (var i=0;i<this.selectList.length;i++)
                    {
                        if (this.selectList[i].amounts===0)
                        {

                        }else
                        {
                            newAr.push(this.selectList[i]);
                        }
                    }
                    console.log(newAr);
                    if (newAr.length===0)
                    {
                        this.$dialog.toast({
                            mes: '所选商品数量为空！',
                            timeout: 1500
                        });
                    }else
                    {
                        localStorage.setItem('voucher',JSON.stringify
                        (newAr));
                        localStorage.setItem('room',JSON.stringify(''));
                        localStorage.setItem('phone',JSON.stringify(JSON.parse(localStorage.getItem(userInfoData)).mobile));
                        localStorage.setItem('address',JSON.stringify
                        (JSON.parse(localStorage.getItem(userInfoData)).addr));
                        this.$router.push({name: 'voucherOrder'});

                    }


                },



                async getTypeFunc()
                {
                    var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                    var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                    var response = await vouchertype(mobile,partnerUuid);
                    if (response.data.code === 200) {
                        this.$dialog.loading.close();
                        this.typeList=response.data.data;

                    }else
                    {
                        this.$dialog.loading.close();
                        this.$dialog.toast({
                            mes: response.data.msg,
                            timeout: 1500
                        });
                    }
                },
                async freshenList()
                {
                    var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                    var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                    // mobile,partnerUuid,pageNumber,pageSize,typeUuid,name,
                    this.pageNumber=1;
                    this.pageSize= 20;
                    var response = await voucherlist(mobile,partnerUuid,this.pageNumber,this.pageSize,this.typeUuid,this.searchContent);
                    this.$dialog.loading.open('加载中...');
                    var relist=[];
                    if (response.data.code === 200) {
                        this.$dialog.loading.close();
                        relist = response.data.data.list;
                        this.voucherAr.splice(0, this.voucherAr.length);//清空数组

                        for (var z=0;z<relist.length;z++) {

                            var dic = {};
                            dic = relist[z];
                            dic['amounts'] = '0';
                            this.voucherAr.push(dic);
                        }
                        console.log(this.voucherAr);

                        console.log('第一次数据'+this.voucherAr.length);
                        if (this.selectList.length === 0){

                        }else
                        {
                            for (var j=0;j<this.selectList.length;j++){

                                var  selectDic=this.selectList[j];
                                for (var i = 0; i < this.voucherAr.length; i++) {
                                    var dic = {};
                                    dic = this.voucherAr[i];


                                    if (selectDic['uuid']===dic['uuid'])
                                    {
                                        console.log('替换的数据');
                                        console.log(selectDic);

                                        console.log('======');

                                        console.log(dic);
                                        //新数据替换旧数据 把选择的数据替换列表的数据
                                        this.voucherAr.splice(i,1,selectDic);
                                    }else
                                    {

                                        this.voucherAr.splice(i,1,dic);

                                    }
                                }
                            }

                        }
                        console.log('第二次数据'+this.voucherAr.length);
                        console.log(this.voucherAr);


                        if (this.searchContent.length===0)
                        {
                            this.placeName='没有相关类型凭证';

                        }else
                        {
                            this.placeName='未搜寻到相关结果';

                        }

                        this.serviceTotalPage = response.data.data.totalPage;
                        if (this.serviceTotalPage > 1) {
                            this.pageNumber++;
                        } else {
                            /* 所有数据加载完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        }

                    }else
                    {
                        this.$dialog.loading.close();
                        this.$dialog.toast({
                            mes: response.data.msg,
                            timeout: 1500
                        });
                    }

                },
                async getMoreloadList() {
                    console.log('getMoreloadList');
                    // mobile,partnerUuid,pageNumber,pageSize,typeUuid,name,
                    if (this.pageNumber > 1) {
                        var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                        var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                        var response = await voucherlist(mobile,partnerUuid,this.pageNumber,this.pageSize,this.typeUuid,this.searchContent);
                        if (response.data.code === 200) {
                            const relist = response.data.data.list;
                            var _list = [];
                            // for (var i = 0; i < relist.length; i++) {
                            //     var dic = {};
                            //     dic = relist[i];
                            //     dic['amounts'] = '0';
                            //     _list.push(dic);
                            // }


                            for (var z=0;z<relist.length;z++) {

                                var dic = {};
                                dic = relist[z];
                                dic['amounts'] = '0';
                                _list.push(dic);
                            }
                            console.log('第一次加载数据'+_list.length);
                            console.log(_list);
                            if (this.selectList.length === 0){

                            }else
                            {
                                for (var j=0;j<this.selectList.length;j++){

                                    var  selectDic=this.selectList[j];
                                    for (var i = 0; i < _list.length; i++) {
                                        var dic = {};
                                        dic = _list[i];
                                        if (selectDic['uuid']===dic['uuid'])
                                        {
                                            console.log('替换的数据');
                                            console.log(selectDic);
                                            //新数据替换旧数据 把选择的数据替换列表的数据
                                            _list.splice(i,1,selectDic);
                                        }
                                    }
                                }

                            }
                            console.log('第二次加载数据'+_list.length);


                            this.voucherAr = [...this.voucherAr, ..._list];

                            if (_list.length < this.pageSize || this.pageNumber === this.serviceTotalPage) {
                                /* 所有数据加载完毕 */
                                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                                return;
                            }

                            /* 单次请求数据完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                            this.pageNumber++;
                            console.log('加载完'+this.pageNumber);

                        } else {

                        }
                    } else {
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                    }
                },
            },

    }
</script>

<style scoped>
    .vouchersearchbg
    {
        z-index:3000;
        position: fixed;
        width: 100%;
        height: 1rem;
        background-color: white;
        top: 0;
        left: 0;
    }
    .typebgmax{
        top: 1rem;
        position: fixed;
        width: 100%;
        overflow: scroll;
        height: 250px;
        left: 0;
        z-index:2000;
    }
    .typebgmin{
        top: 1rem;
        position: fixed;
        width: 100%;
        overflow: scroll;
        height: 250px;
        left: 0;
        z-index:1000;
    }
    .scrolllistbgmax{
        border-top: 1px solid #e1e1e1;
        position: relative;
        top: 1.8rem;
        height: 80%;
        padding-bottom: 2.5rem;
        z-index: 2000;

    }
    .scrolllistbgmin{
        border-top: 1px solid #e1e1e1;
        position:relative;
        top: 1.8rem;
        height: 80%;
        padding-bottom: 2.5rem;
        z-index:10;
    }
    .below-big
    {
        position: fixed;
        bottom: 0;
        height: 55px;
        left: 0;
        width: 100%;
        background-color: #b3b3b3;
        z-index: 4000;
    }
    .common {
        width: 0.8rem;
        height: 0.8rem;
        margin-bottom: 0px;
        margin-top: 5px;
        margin-left: 20px;
    }
    .voucheryuan
    {

        position: relative;
        top: -0.9rem;
        left: 1.6rem;
        width: 0.4rem;
        height: 0.4rem;

    }
    .confrim-button
    {
        background-color:#83d16f;
        color:white;
        height: 100%;
        width: 40%;
        position: absolute;
        right: 0rem;


    }
    .confrimcumston-button{
        background-color:#bfbebf;
        color:white;
        height: 100%;
        width: 40%;
        position: absolute;
        right: 0rem;
    }
    .tanchuang_wrap{
        width:100%;
        height:100%;
        position:absolute;
        left: 0px;
        top: 0px;
        z-index:30000;
        display:none;
    }
    .lightbox{
        width:100%;
        z-index:100002;
        height:100%;
        background-color:black;
        filter:alpha(Opacity=70);
        -moz-opacity:0.2;
        opacity: 0.2;
        position:absolute;
        /*top:100px;*/
        left:0px;
    }
    .tanchuang_neirong{
        width:100%;
        background-color:#FFF;
        position: fixed;
        z-index:100003;
        bottom: 55px;
    }

</style>